@extends('users.app')
@section('title', '生成推广链接')
@section('content')
<div class="col-md-12 col-12">
  <div class="card ">
    <div class="card-header">
      <h1>生成推广链接</h1>
    </div>
    <div class="card-body" id="app">
      <div class="form-group col-12 col-md-4">
        <label for="exampleFormControlSelect1">选择站点</label>
        <select v-model="site_id" class="form-control" id="exampleFormControlSelect1" name="site_id">
          @if(count($sites))
          @foreach($sites as $_site)
          <option value="{{$_site->id}}">{{$_site->title}}</option>
          @endforeach
          @endif
        </select>
      </div>
      <div class="form-group col-12 col-md-4">
        <label for="exampleFormControlSelect2">链接格式</label>
        <select v-model="link_type" class="form-control" id="exampleFormControlSelect2">
          <option value="1">短链接 t.cn</option>
          <option value="3">短链接 w.url.cn</option>
          <option value="2">原始链接</option>
        </select>
      </div>
      <div class="form-group col-12 col-md-4">
        <label for="exampleFormControlSelect2">生成方式</label>
        <select v-model="create" class="form-control" id="exampleFormControlSelect2" :disabled="site_id < 1">
          <option value="1">单一模式</option>
          <option value="2">随机模式</option>
        </select>
      </div>
      <div class="form-group col-12 col-md-4" v-if="create > 1">
        <label for="exampleFormControlSelect2">是否更新历史链接</label>
        <select v-model="update_history" class="form-control" id="exampleFormControlSelect2">
          <option value="1">是</option>
          <option value="0">否</option>
        </select>
      </div>
      <div class="form-group col-12 col-md-4" v-if="create > 1">
        <label for="exampleFormControlSelect2">选择生成条数</label>
        <select v-model="nums" class="form-control" id="exampleFormControlSelect2" :disabled="create < 2">
          <option value="1">1条</option>
          <option value="5">5条</option>
          <option value="10">10条</option>
          <option value="20">20条</option>
        </select>
      </div>
      <div class="form-group col-12 col-md-6">
        <label for="content-field">填写视频链接：</label>
        <textarea name="content" style="height:8rem;" id="content-field" class="form-control" rows="3" v-model="video_urls">
            </textarea>
      </div>
      <div class="form-group col-12 col-md-6">
        <label for="content-field">生成的链接：</label>
        <textarea name="content" style="height:8rem;" id="content-field" class="form-control" rows="3" v-model="create_urls">
            </textarea>
      </div>
      <div class="form-group col-lg-12 text-righ mb-3">
        <button @click="create_short_urls" class="btn btn-common" :disabled="btn_lock">生成推广链接</button>
        <a href="{{ route('share_short_urls') }}" :class="{disabled: share_btn_lock}" class="btn btn-common">分享推广链接</a>
        <span>@{{ message }}</span>
      </div>
    </div>
  </div>
</div>
@endsection
@section('script')
<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/sweetalert.min.js"></script>
<script src="/assets/js/axios.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    url: '{{ route('short_urls.create') }}',
    fixed_url: '{{ route('short_urls.create_fixed', $site->id) }}',
    random_url: '{{ route('short_urls.create_random', $site->id) }}',
    site_id: @if($site) {{ $site->id }} @else 0 @endif,
    message: '',
    urls: '',
    nums: 10,
    create: {{$create}},
    btn_lock: false,
    share_btn_lock: true,
    link_type: 1,
    update_history: 0,
    create_urls: '',
    video_urls: [],
    post_video_urls: []
  },
  created: function() {

  },
  watch: {
    video_urls: function (val) {
      if (val.replace(/[\r\n]/g, "")) this.post_video_urls = val.split('\n');
      else this.post_video_urls = [];
    }
  },
  methods: {
    create_short_urls: function() {
      if (this.site_id <= 0) {
        this.error_msg('请选择站点');
      } else if(this.create < 2 && this.video_urls.length < 1) {
        this.error_msg('填写视频地址');
      } else {
        this.message = '';
        var _this = this;
        this.btn_lock = true;
        if ( this.update_history > 0 ) {
          if (this.post_video_urls.length < 1) {
            swal('请填写视频地址！');
            _this.btn_lock = false;
          } else {
            swal(
              {
                title: "是否更新历史链接?",
                text: "选择此项将覆盖此站点下所有已生成的随机模式视频地址!",
                buttons: {
                cancel: "取消",
                defeat: {
                  text: "确定",
                  value: true
                }
              },
              dangerMode: true
            }).then((deletes) => {
              if (deletes) {
                _this.send_create_urls();
              } else {
                _this.btn_lock = false;
              }
            })
          }
        } else {
          _this.send_create_urls();
        }
      }
    },
    send_create_urls: function() {
      var _this = this;
      var _url = this.create < 2 ? this.fixed_url : this.random_url;
      axios.post(_url, {
          nums: _this.nums,
          create_type: this.create,
          link_type: this.link_type,
          video_urls: this.post_video_urls,
          siteid: this.site_id,
          update_history: this.update_history
        }).then(function(res) {
          if(res.data.status === 422) {
            _this.error_msg('请填写视频地址')
          } else if(res.data.datas) {
            _this.create_urls = res.data.datas.join('\n');
            _this.share_btn_lock = false;
          }
          _this.btn_lock = false;
        }).catch(function (error){
          if (error.response.status === 422) {
            _this.error_msg('视频地址格式有误，请检查！')

          } else if(error.response.status === 403) {
            _this.error_msg('您没有权限操作此站点！')

          } else if(error.response.status === 500) {
            _this.error_msg('系统错误，请稍候重试！')

          }
          _this.btn_lock = false;
        });
    },
    error_msg: function(message) {
      swal({
        text: message,
        icon: 'warning',
        buttons: false
      });
    }
  }
})
</script>
@stop
